<template>
<div>
  <el-button type="primary" @click="adds">新增</el-button>

  <el-table
        :data="tableData"
      border
      style="width: 100%">
    <el-table-column
        fixed
        prop="shareholderNumber"
        label="股东编号"
        width="150">
    </el-table-column>
    <el-table-column
        prop="shareholderName"
        label="股东名称"
        width="120">
    </el-table-column>
    <el-table-column
        prop="shareholderShareholding"
        label="持股/变动"
        width="120">
    </el-table-column>
    <el-table-column
        prop="shareholderRatio"
        label="持股比例"
        width="120">
        <template scope="scop">
          {{scop.row.shareholderRatio}}%
        </template>
    </el-table-column>
    <el-table-column
        prop="shareholderCreate"
        label="持股日期"
        width="120">
    </el-table-column>
    <el-table-column
        prop="shareholderStatus"
        label="持股状态">
      <template v-slot="pp">
        <el-switch
            v-model="pp.row.shareholderStatus"
            active-color="#13ce66"
            inactive-color="#ff4949"
            @change="outStatus(pp.row)"
            active-value="0"
            inactive-value="1">
        </el-switch>
      </template>
    </el-table-column>


    <el-table-column
        fixed="right"
        label="操作"
        width="100">
      <template slot-scope="scope">
        <el-button @click="StareDelete(scope.row)" type="text" size="small">删除</el-button>
        <el-button @click="Update(scope.row)" type="text" size="small">修改</el-button>

      </template>
    </el-table-column>
  </el-table>

  <el-pagination
      @current-change="goPage"

      :page-size="form.pageSize"
      layout="total, prev, pager, next"
      :total="form.total">
  </el-pagination>


  <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
    <el-form :model="form1">
      <el-form-item label="股东编号" :label-width="formLabelWidth">
        <el-input v-model="form1.shareholderNumber" autocomplete="off" disabled></el-input>
      </el-form-item>
      <el-form-item label="股东名称" :label-width="formLabelWidth">
        <el-input v-model="form1.shareholderName" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="持股/变动" :label-width="formLabelWidth">
        <el-input v-model="form1.shareholderShareholding" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="持股比例" :label-width="formLabelWidth">
        <el-input v-model="form1.shareholderRatio" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="持股日期" :label-width="formLabelWidth">

        <el-date-picker
            v-model="form1.shareholderCreate"
            type="date"
            placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="持股状态:" :label-width="formLabelWidth">
        <el-switch
            v-model="form1.shareholderStatus"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-value="0"
            inactive-value="1">
        </el-switch>
      </el-form-item>


    </el-form>
    <div slot="footer" class="dialog-footer">

      <el-button type="primary" @click="save">确 定</el-button>
    </div>
  </el-dialog>

  <el-dialog title="修改地址" :visible.sync="dialogFormVisible2">
    <el-form :model="form2">
      <el-form-item label="股东编号" :label-width="formLabelWidth2">
        <el-input v-model="form2.shareholderNumber" autocomplete="off" disabled></el-input>
      </el-form-item>
      <el-form-item label="股东名称" :label-width="formLabelWidth2">
        <el-input v-model="form2.shareholderName" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="持股/变动" :label-width="formLabelWidth2">
        <el-input v-model="form2.shareholderShareholding" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="持股比例" :label-width="formLabelWidth2">
        <el-input v-model="form2.shareholderRatio" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="持股日期" :label-width="formLabelWidth2">

        <el-date-picker
            v-model="form2.shareholderCreate"
            type="date"
            placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="持股状态:" :label-width="formLabelWidth2">
        <el-switch
            v-model="form2.shareholderStatus"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-value="0"
            inactive-value="1">
        </el-switch>
      </el-form-item>


    </el-form>
    <div slot="footer" class="dialog-footer">

      <el-button type="primary" @click="updates">确 定</el-button>
    </div>
  </el-dialog>

</div>


</template>

<script>
export default {
  name: "ShareholderView",
  data(){
    return{
      tableData:[],
      form:{
        pageSize:2,
        pageNum:1,
        total:0,
      },

      dialogFormVisible:false,
      form1:{
        shareholderNumber:"",
      },
      formLabelWidth:'120px',

      dialogFormVisible2:false,
      form2:{},
      formLabelWidth2:'120px',

    }
  },
  methods:{
    Xuehua(){
      this.axios.get("http://localhost:8005/shareholder/getNumber").then(res=>{
        this.form1.shareholderNumber=res.data;
      })
    },
    updates(){
      this.axios.post("http://localhost:8005/shareholder/ShareUpdate",this.form2).then(res=>{
        this.$message.success("修改成功");
        this.dialogFormVisible2=false;
        this.init();
      })
    },
    Update(row){
      this.dialogFormVisible2=true;
      this.form2=row;
    },
    StareDelete(row){
      this.axios.get("http://localhost:8005/shareholder/ShareDelete?id="+row.id).then(res=>{
        this.$message.success("删除成功");
        this.init();
      })
    },
    save(){
      this.axios.post("http://localhost:8005/shareholder/ShareAdd",this.form1).then(res=>{
          this.$message.success("添加成功");
          this.init();

          this.dialogFormVisible=false;
      })
    },
    adds(){
      this.init();
      this.Xuehua();
      this.dialogFormVisible=true;

    },
    outStatus(pp){
      this.axios.post("http://localhost:8005/shareholder/updateStatus",pp).then(res=>{
        this.$message.success(res.data.data);
        this.init();
      })
    },
    goPage(page){
      this.form.pageNum=page;
      this.init();
    },
    init(){
      this.axios.post("http://localhost:8005/shareholder/Stortlist",this.form).then(res=>{

        this.tableData=res.data.data.list;
        this.form.total=res.data.data.total;

      })
    }
  },
  created() {
    this.init();
    this.Xuehua();
  }
}
</script>

<style scoped>

</style>